<template>
  <el-button type="primary" @click="SendEmail(Emails)"  :disabled="btnBoolean">{{BtnNumber}}</el-button>
</template>

<script>
// import {request} from "../network/request";


import {request} from "../network/request";

export default {
  name: "Email-Code",
  props:{Emails:String},
  data() {
    return {
      // 按钮上的文字
      BtnNumber:'获取验证码',
      //禁用重新发送验证码按钮
      btnBoolean:false,
      // 倒计时秒数
      countdown: 60,
      // 定时器
      timer: null
    }
  },
  methods:{
    //发送邮箱验证码
    SendEmail(email){
      request({
        url:`/api/Register/Send?mailbox=${email}`,
        method:'post'
      }).then((val)=>{
        //把验证码传到父组件
        this.$emit('obtainCode',val.data);
        //设置倒计时
        this.getCode();
      }).catch(_=>{this.$message.error('发送失败！！！');});
    },
    // 发送验证码倒计时
    getCode() {
      // 验证码60秒倒计时
      if (!this.timer) {
        this.getValidStr();
        this.timer = setInterval(this.getValidStr, 1000)
      }
    },
    getValidStr(){
      if (this.countdown > 0 && this.countdown <= 60) {
        this.countdown--;
        if (this.countdown !== 0) {
          this.BtnNumber = "重新发送(" + this.countdown + ")";
          this.btnBoolean = true;
        } else {
          clearInterval(this.timer);
          this.BtnNumber = "获取验证码";
          this.countdown = 60;
          this.timer = null;
          this.btnBoolean = false;
        }
      }
    }

  }
}
</script>

<style scoped>
</style>
